<template>
  <div>
    <!-- <nav-header :headerTitle="'推荐文章'" :navBgColor="'#fff'" :isNavBack="false"></nav-header> -->
    <!-- <div class="nav-height"></div> -->
    <div class="article-list" >
      <div class="line"></div>
      <van-list
        class="articlelist"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="gainArticleListByPages" 
        :error.sync="error"
        error-text="请求失败，点击重新加载"
      > 
        <articleItem
          v-for="itemsItem in articleList"
          :articleItemInfo="itemsItem"
          :key="itemsItem"
        ></articleItem>
      </van-list>  
    </div>  
  </div>
</template>
<script>
import Vue from "vue";
// import navHeader from "@/components/NavHeader";
import articleItem from "@/components/ArticleItem";
import { List } from "vant";
 
Vue.use(List);
export default {
  name: "articleList",
  components: {
    // navHeader,
    articleItem
  },
  data() {
    return { 
      articleList: [],
      finished: false,
      loading: false,
      error:false,
      // 文章list 分页信息
      articleCategoryId: 1,
      pageNum: 1,
      pageSize: 10,

      updataNumShow:false
    };
  },
  mounted() { 
    this.$setgoindex() ; 
    window.localStorage.uniqueId = this.$route.query.uniqueId;
  }, 
  methods: { 
    //  list加载  根据文章类型id获取文章list 分页
    gainArticleListByPages() { 
      let sendData = {
        articleCategoryId: this.articleCategoryId,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      this.$http.post("article/getArticleInfoByPagination", sendData).then(
        res => {
          let resData = res.data;
          this.articleList = this.articleList.concat(resData.items);
          ++this.pageNum;
          // 加载状态结束
          this.loading = false;
          // 数据全部加载完成
          if (resData.pages < this.pageNum) {
            this.finished = true;
          }
        },
        err => {
          this.error = true;
          console.log(err);
        }
      );
    }, 
  }
};
</script>

<style scoped lang="scss"> 

.article-list {
  position: relative;
  margin-top: 20px;
  .line{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-top: 1px solid #f1f1f1; 
  } 
  .tab-bottom {
    width: 750px;
    height: 10px;
    background: rgba(242, 245, 247, 1);
  }
  .articlelist {
    width: 750px;
    height: auto;
    margin: 0 auto 30px;
  }
}  
</style>
<style lang="scss">  
.van-tabs__wrap {
  position: fixed;
  top: 80px;
}
.van-tabs--line .van-tabs__wrap {
  height: 110px;
}
.van-tab {
  line-height: 110px;
  font-size: 32px;
  font-family: PingFangSC-Medium;
}
.van-tab--active {
  font-weight: 700;
  font-size: 36px;
}
.van-tabs--line {
  padding-top: 110px;
}
.van-tabs__wrap--scrollable .van-tab{
  flex: auto!important;
}
</style>

